import React from "react";

/**
 * 使用 es module的语法 直接引入css文件
 * 注意：不要忘记css后缀
 */
import './learn-style.css'

/**
 * 引入的时候需要设置一个变量接收刚定义的css module模块
 * 并且引入的时候注意 写完文件名 也就是learn-class.module.css
 * Styles 是一个对象 里面存放我们定义的样式
 */
import Styles from './learn-class.module.css'

import './learn-class.scss'

import ScssStyle from './learn-class.module.scss'

export default class LearnClassName extends React.Component {
  render() {
    console.log(Styles)
    return (
      <div>
        <div className="blue">我是蓝色的字</div>

        <div className="red">我是红色</div>

        {/* 
          使用Styles.xxx 拿到对应的className然后给
          className进行赋值
          注意：必须使用Styles也就是说引入的这个对象给className进行
          赋值，否则脚手架将无法根据规则自动生成模块化的语法
        */}
        <div className={Styles.yellow}>我是黄色字</div>
        <div className="yellow">我是黄色字</div>

        <div className="box"></div>
        <div className={ScssStyle.box}></div>
      </div> 
    );
  }
}
